<template>
  <div style="padding: 20px 0;">
    <div v-if="follows.length === 0">
      {{ $t('Nav.hintFollow') }}
    </div>

    <div v-else>
      <article v-for="(item, index) in follows" :key="index" class="media">
        <div class="media-content">
          <div class="content level-left">
            <el-avatar
              :size="48"
              :src="item.avatar"
            />
            <el-tooltip
              class="item"
              effect="dark"
              :content="item.alias"
              placement="top"
            >
              <router-link
                :to="{ name: 'user', params: { username: item.username } }"
                style="padding: 0 20px"
              >
                {{ item.alias }}
                <span class="is-size-7 has-text-grey">{{
                  '@' + item.username
                }}</span>
              </router-link>
            </el-tooltip>
          </div>
        </div>
        <div v-if="token" class="media-right">
          <div class="level">
            <div class="level-item mr-1">
              <button
                v-if="hasFollows[index]"
                class="button is-success button-center is-fullwidth"
                @click="handleUnFollow(item.id, index)"
              >
                {{ $t('Author.unFollow') }}
              </button>

              <button
                v-else
                class="button is-link button-center is-fullwidth"
                @click="handleFollow(item.id, index)"
              >
                {{ $t('Author.follow') }}
              </button>
            </div>
          </div>
        </div>
      </article>
    </div>

    <!--分页-->
    <pagination
      v-show="page.total > 0"
      class="mt-5"
      :total="page.total"
      :page.sync="page.current"
      :limit.sync="page.size"
      @pagination="fetchFollowById"
    />
  </div>
</template>

<script>
import { getFollowByName, follow, hasFollow, unFollow } from '@/api/follow'
import { mapGetters } from 'vuex'
import pagination from '@/component/Pagination'
import Vue from 'vue'
export default {
  name: 'Follow',
  props: {
    topicUser: {
      type: Object,
      required: true,
    },
  },
  components: { pagination },
  data() {
    return {
      follows: {},
      page: {
        current: 1,
        size: 5,
        total: 0,
      },
      hasFollows: [],
    }
  },
  computed: {
    ...mapGetters(['token', 'user']),
  },
  created() {
    this.fetchFollowById()
  },
  methods: {
    fetchFollowById() {
      getFollowByName(
        this.$route.params.username,
        this.page.current,
        this.page.size
      ).then((res) => {
        const { data } = res
        this.page.current = data.follows.current
        this.page.size = data.follows.size
        this.page.total = data.follows.total
        this.follows = data.follows.records
        this.hasFollows = new Array(this.page.total).fill(true)
        for (let i = 0; i < this.hasFollows.length; i++) {
          if (this.token != null && this.token !== '') {
            hasFollow(this.follows[i].id).then((value) => {
              const data2 = value.data
              Vue.set(this.hasFollows, i, data2.hasFollow)
            })
          }
        }
      })
    },
    handleFollow: function(id, index) {
      if (this.token != null && this.token !== '') {
        follow(id).then((response) => {
          const { message } = response
          this.$message.success(message)
          Vue.set(this.hasFollows, index, !this.hasFollows[index])
        })
      } else {
        this.$message.success(this.$t('Author.login'))
      }
    },
    handleUnFollow: function(id, index) {
      unFollow(id).then((response) => {
        const { message } = response
        this.$message.success(message)
        Vue.set(this.hasFollows, index, !this.hasFollows[index])
      })
    },
  },
}
</script>

<style></style>
